<nz-modal [(nzVisible)]="isVisible" [nzTitle]="l('create_product')" [nzFooter]="modalFooter" (nzOnCancel)="close()">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="hsCode">{{l('customs_code')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="hsCode" id="hsCode" [(ngModel)]="detail.hsCode">
        <nz-form-explain *ngIf="validateForm.get('hsCode').hasError('required')">
            {{l('please_enter_custom_code')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('hsCode').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="productName">{{l('product_name')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="productName" id="productName" [(ngModel)]="detail.productName">
        <nz-form-explain *ngIf="validateForm.get('productName').hasError('required')">
            {{l('please_enter_product_name')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('productName').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="spc">{{l("specification")}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="spc" id="spc" [(ngModel)]="detail.spc">
        <nz-form-explain *ngIf="validateForm.get('spc').hasError('required')">
            {{l('please_enter_specification')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('spc').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="quantity">{{l('count')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-input-number [(ngModel)]="detail.quantity" formControlName="quantity" [nzMin]="1" [nzStep]="1" [nzMax]='99999999'></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('quantity').errors">{{l('please_enter_count')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="unidade">{{l('unit')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="unidade" id="unidade" [(ngModel)]="detail.unidade">
        <nz-form-explain *ngIf="validateForm.get('unidade').hasError('required')">
            {{l('please_enter_unit')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('unidade').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="origin">{{l('country_of_origin')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="origin" id="origin" [(ngModel)]="detail.origin">
        <nz-form-explain *ngIf="validateForm.get('origin').hasError('required')">
            {{l('please_enter_country_of_origin')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('origin').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="destination">{{l('destination_country')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="destination" id="destination" [(ngModel)]="detail.destination">
        <nz-form-explain *ngIf="validateForm.get('destination').hasError('required')">
            {{l('pleasae_enter_destination_country')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('destination').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="price">{{l('price')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-input-number [(ngModel)]="detail.price" formControlName="price" [nzMin]="1" [nzStep]="1" [nzMax]='99999999'></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('price').errors">{{l('please_enter_price')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="total">{{l('total_price')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-input-number [(ngModel)]="detail.total" formControlName="total" [nzMin]="1" [nzStep]="1" [nzMax]='99999999'></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('total').errors">{{l('please_enter_total_price')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="10" [nzXs]="24" nzRequired nzFor="moeda">{{l('currency_system')}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="moeda" id="moeda" [(ngModel)]="detail.moeda">
        <nz-form-explain *ngIf="validateForm.get('moeda').hasError('required')">
            {{l('please_enter_currency_system')}}</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('moeda').hasError('maxlength')">
            {{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>


  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="close()">{{l('cancel')}}</button>
    <button nz-button nzType="primary" (click)="save()" [nzLoading]="isLoading">{{l('submit')}}</button>
  </ng-template>
</nz-modal>